<template>
    <div class="tmpl">
        <!-- 引入返回导航 -->
        <mt-header :title="imgInfo.title" fixed>
            <mt-button slot="left" icon="back" @click="handleBack"></mt-button>
        </mt-header>
        <!-- 图  -->
        <img class="imagesinfo" :src="imgInfo.images">

        <div class="photo-title">
            <p v-text="imgInfo.zhaiyao"></p>
        </div>
        <div class="photo-desc">
            <p v-html="imgInfo.content"></p>
        </div>
        
        <!-- 盖掉 底部内容 -->
            <nav class="mui-bar mui-bar-tab zindex">
            <a class="mui-tab-item" @click="value"><img src="../../static/img/logo.jpg" width="40px" /></a>
            <a class="mui-tab-item" :href="imgInfo.tel">
                <span class="mui-icon icon-dianhua"></span>
                <span class="mui-tab-label">电话</span>
            </a>
            <a class="mui-tab-item hitemt" @click="value">￥{{imgInfo.cost}}</a>
            <a class="mui-tab-item hitemt" @click="value"><img src="../../static/img/shandian.png" /><div>立即预定</div></a>
        </nav>
    </div>
</template>
<script>
export default {
    data(){
        return {
            imgInfo:{},//详情数据对象
            pid:this.$route.params.id, //记录当前图片id
           
        }
    },
    created(){
        //1:获取路由参数
        // let pid = this.$route.params.id;
        //2:发起请求2个
        //图片详情
        this.$ajax.get('?tbname=activity&field=images,title,content,tel,cost,zhaiyao&where=id::' + this.pid)
        .then(res=>{
            //一个id对应一个详情对象
            res.data.rows[0].tel = 'tel:' + res.data.rows[0].tel;
            this.imgInfo = res.data.rows[0];
            // console.log(this.imgInfo);
        })
        .catch(err=>{
            console.log(err)
        });
    },
    methods:{
        handleBack(){
                this.$router.go(-1); //根据浏览器记录返回上一次
            }
    }
    
}


</script>
<style scoped>
.imagesinfo {
    width: 100%;
    padding-bottom: 5px; margin-top: 50px;
}

li {
    list-style: none;
}

ul {
    margin: 0;
    padding: 0;
}

.photo-title {
    overflow: hidden;
}

.photo-title,
.photo-desc {
   /* border-bottom: 1px solid rgba(0, 0, 0, 0.2);*/
    padding-bottom: 5px;
    margin-bottom: 5px;
    padding-left: 5px;
}

.photo-title p {
    color: green;
    font-size: 16px;
    font-weight: bold;
}

.photo-title span {
    margin-right: 20px;
}

.mui-table-view.mui-grid-view.mui-grid-9 {
    background-color: white;
    border: 0;
}

.mui-table-view.mui-grid-view.mui-grid-9 li {
    border: 0;
}

/*.photo-desc p {
    font-size: 18px;
}*/

.mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-3 {
    padding: 2 2;
}

.zindex {
    z-index: 11;
}
.hitemt {
    background: #fd8238;color: white;
}
.hitemt img , .hitemt div {
    float: right;
}
</style>
